<template>
  <view class="content">
    <view class="todo-list">
      <view class="list-title">今日待办</view>
      <template v-if="todoThings.length > 0">
        <view v-for="(thing, index) in todoThings" :key="thing.id" class="thing thing-todo">
          <u-checkbox
          shape="square"
          @change="onTodoThingChange($event, index)"
          v-model="thing.done"
          :name="thing.id">{{ thing.title }}</u-checkbox>
        </view>
      </template>
      <text v-else>还没有添加待办清单~</text>
    </view>
    <view class="later-list">
      <view class="list-title">以后</view>
      <template v-if="laterThings.length > 0">
        <view v-for="(thing, index) in laterThings" :key="thing.id" class="thing thing-later">
          <u-checkbox
          shape="square"
          @change="onLaterThingChange($event, index)"
          v-model="thing.done"
          :name="thing.id">{{ thing.title }}</u-checkbox>
        </view>
      </template>
      <text v-else>还没有添加待办清单~</text>
    </view>
    <view class="done-list">
      <view class="list-title">已完成</view>
      <template v-if="doneThings.length > 0">
        <view v-for="(thing, index) in doneThings" :key="thing.id" class="thing thing-done">
          <u-checkbox
            shape="square"
            @change="onDoneThingChange($event, index)"
            v-model="thing.done"
            :name="thing.id">{{ thing.title }}</u-checkbox>
        </view>
      </template>
    </view>
    <button class="btn-create" @click="showPopupCreate = true"> + </button>
    <u-popup mode="bottom" v-model="showPopupCreate">
      <view class="form-thing-create">
        <form>
          <view class="form-group">
            <input
              type="text"
              class="input-thing"
              placeholder="输入代办事项"
              v-model="thing.title"
            />
          </view>
          <view class="form-btn">
            <u-row gutter="16">
              <u-col span="6">
                <u-icon name="reload" size="46" @click="showCronType = true"></u-icon>
              </u-col>
              <u-col span="3" offset="3" class="u-flex u-row-right">
                <u-button type="primary" size="mini" @click="onBtnSubmitClick">保存</u-button>
              </u-col>
            </u-row>
          </view>
        </form>
      </view>
    </u-popup>
    <u-action-sheet
      :list="cronTypes"
      v-model="showCronType"
      :tips="cronTypeTips"
      @click="onCronTypeConfirm"></u-action-sheet>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import DLCheck from "@/components/dl-check.vue";

import { Cron, CronType } from "@/models/cron";
import Thing from "@/models/thing";

@Component({
  components: {
    DLCheck,
  },
})
export default class Index extends Vue {
  todoThings: Thing[] = [];
  laterThings: Thing[] = [];
  doneThings: Thing[] = [];

  showPopupCreate:Boolean = false;
  showCronType:Boolean = false;

  thing: Thing = new Thing("");
  cronTypeTips: any = {
    text: "重复周期",
    fontSize: 40,
  };
  cronTypes: any[] = [
    { type: CronType.Day, text: "天" },
    { type: CronType.WorkDay, text: "工作日" },
    { type: CronType.Week, text: "星期" },
    { type: CronType.Month, text: "月" },
  ];

  //#region 实例事件
  onLoad() {
    this.loadThings();
  }
  //#endregion

  //#region 方法
  closePopupCreate() {
    this.showPopupCreate = false;
  }

  /**
   * 获取重复周期对应的日期值
   */
  getDayofCronType(type: CronType): number|undefined {
    let day: number|undefined = undefined;
    const date = new Date();

    switch (type) {
      case CronType.Week:
        day = date.getDay();
        break;

      case CronType.Month:
        day = date.getDate();
        break;

      default:
        break;
    }

    return day;
  }

  loadThings() {
    const items = uni.getStorageSync("things");
    if (items) {
      items.forEach((item: Thing, index: number) => {
        const nowDate = new Date();

        // 一次待做如果不是今天的则不显示并删除
        if (item.cron === undefined) {
          if (item.createdAt <
            new Date(`${nowDate.getFullYear}/${nowDate.getMonth()}/${nowDate.getDate()} 00:00:00`).getTime()) {
              items.splice(index, 1);
              return;
          }
        }

        if (this.isLaterThing(item)) {
          this.laterThings.push(item);
          return;
        }

        if (item.done) {
          this.doneThings.push(item);
          return;
        }

        this.todoThings.push(item);
      });
    }
  }

  isLaterThing(item: Thing) {
    if (item.done) {
      return false;
    }

    const nowDate = new Date();
    const day = nowDate.getDay();

    // 工作日待做周日和周六不显示
    if (item.cron?.type === CronType.WorkDay && (day == 0 || day == 6)) {
      return true;
    }
    // 每周重复待做星期不同则不显示
    if (item.cron?.type === CronType.Week && day != item.cron.day) {
      return true;
    }
    // 每月重复待做日期不同则不显示
    if (item.cron?.type === CronType.Month && nowDate.getDate() != item.cron.day) {
      return true;
    }

    return false;
  }

  resetThing() {
    this.thing = new Thing("");
  }

  saveThings() {
    uni.setStorage({
      key: "things",
      data: this.todoThings.concat(this.laterThings, this.doneThings),
    });
  }
  //#endregion

  //#region 事件
  onBtnSettingClick() {
    (this.$refs.popupCron as any).open();
  }

  onBtnSubmitClick() {
    if (this.thing.title == "") {
      this.closePopupCreate();
      return;
    }

    this.todoThings.push(this.thing);
    this.saveThings();
    this.resetThing();
    this.closePopupCreate();
  }

  onTodoThingChange(e: any, index: number) {
    const thing = this.todoThings[index];
    thing.done = true;
    this.doneThings.push(this.todoThings.splice(index, 1)[0]);

    this.saveThings();
  }

  onLaterThingChange(e: any, index: number) {
    const thing = this.laterThings[index];
    thing.done = true;
    this.doneThings.push(this.laterThings.splice(index, 1)[0]);

    this.saveThings();
  }

  onDoneThingChange(e: any, index: number) {
    const thing = this.doneThings[index];
    thing.done = false;

    if (this.isLaterThing(thing)) {
      this.laterThings.push(this.doneThings[index]);
    } else {
      this.todoThings.push(this.doneThings[index]);
    }

    this.doneThings.splice(index, 1);

    this.saveThings();
  }

  onCronTypeConfirm(index: any) {
    if (this.thing.cron === undefined) {
      this.thing.cron = new Cron();
    }

    this.thing.cron.type = this.cronTypes[index].type;
    this.thing.cron.day = this.getDayofCronType(this.cronTypes[index].type);
  }
  //#endregion
}
</script>

<style>
.list-title {
  margin-bottom: 20px;
  font-size: 38rpx;
}

.todo-list,
.later-list,
.done-list {
  padding: 40rpx;
  background: transparent;
}

.thing {
  width: 670rpx;
  margin-bottom: 20rpx;
  background: white;
}

.thing-done {
  text-decoration: line-through;
}

.btn-create {
  position: fixed;
  bottom: 80rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 0;
  line-height: 90rpx;
  text-align: center;
  font-size: 80rpx;
  border-radius: 50%;
  background: mediumseagreen;
  color: white;
}

.form-thing-create {
  width: 750rpx;
  padding: 40rpx 40rpx 20rpx;
  background: white;
}

.form-cron {
  padding: 10rpx 40rpx;
  background: white;
}

.input-thing {
  height: 70rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  background: #f2f2f2;
  border-radius: 10rpx;
}

.week-days {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.week-day {
  margin: 10rpx 0 10rpx 40rpx;
}
</style>
